:root {
    --main: #621122;
    --secondary: #C0A0A7;
    --dark: #310911;
    --dark-gray: #535353;
    --gray: #C4C4C4;
    --light-gray: #E5E5E5
}

body { font-family: Lato, serif; font-size: 18px; }
h1 { font-size: 30px; color: var(--dark-gray)}
h2 { font-size: 24px; color: var(--dark-gray)}
h3 { font-size: 24px; color: var(--main)}
h4 { font-size: 18px; color: var(--main)}
h5 { font-size: 18px; color: var(--dark-gray)}
h6 { font-size: 18px; color: var(--dark-gray)}

.text-main { color: var(--main); }

.main-header { background-color: var(--main); }
.main-header img { opacity: 1 !important; }
.main-header ul { margin-left: auto !important; }

.main-footer { background-color: var(--gray) !important; border-top: none; }

.btn-primary {
    background-color: var(--main);
    border-color: var(--main);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
}
.btn-primary:disabled {
    background-color: var(--dark-gray) !important;
    border-color: var(--dark-gray) !important;
}

.btn-primary-outline {
    background-color: white;
    border-color: var(--main);
}
.btn-primary-outline:hover, .btn-primary-outline:focus {
    color: white;
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
}
.btn-primary-outline:disabled {
    background-color: var(--dark-gray) !important;
    border-color: var(--dark-gray) !important;
}

.btn-main {
    color: #fff;
    background-color: var(--main);
    border-color: var(--main);
}

.btn-outline-main {
    color: var(--main);
    background-color: #fff;
    border-color: var(--main);
}

.btn-gray {
    color: #fff;
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.bg-custom-light-gray {
    background-color: var(--gray);
}

.bg-custom-gray{
    background-color: var(--light-gray);
}

.main-color { color: var(--main); }
.secondary-color {  color: var(--secondary); }
.dark-color { color: var(--dark)}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
    background-color: var(--secondary);
}

.align-middle > tbody > tr > td {
    vertical-align: middle;
}

.disabled-link {
    pointer-events: none;
}

.chip {
    display: inline-block;
    padding: 0 8px;
    height: 24px;
    font-size: 16px;
    border-radius: 25px;
}

.chip .body {
    line-height: 24px;
    padding: 0px 16px 0px 8px;
}

.chip i {
    font-size: 8px;
}

.latest {
    background-color: var(--secondary);
    color: var(--light-gray);
}

.old {
    background-color: var(--gray);
    color: var(--light-gray);
}

.b-light {
    background-color: var(--light-gray);
}

.d-flex-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*DATATABLE STYLES*/

.dataTables_wrapper div.dataTables_info {
    padding-top: 0px !important;
}

.dataTables_wrapper div.dataTables_length label {
    margin: 0px !important;
    font-weight: bolder !important;
}

.dataTables_wrapper div.dataTables_length select {
    background-position: center right;
    background-color: var(--secondary);
    border: 0px solid var(--secondary);
    outline: none;
    box-shadow: none;
}

.page-item.disabled .page-link {
    background-color: var(--secondary);
    border: none;
    color: var(--dark-gray);
}

.page-item .page-link{
    background-color: var(--secondary);
    border: none;
    color: var(--main);
}

.border-8px {
    border-radius: 8px;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1em;
    width: 1em;
    border-radius: 50em;
    background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
}

input[type="search"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
}